import { BasicColumn, FormSchema } from '@/components/Table';
import { h } from 'vue';
import { Switch, Tag } from 'ant-design-vue';
import Icon from '@/components/Icon/Icon.vue';
import { useMessage } from '@/hooks/web/useMessage';
import { SaveHideMenuStatus } from '@/api/sys/menu';

type CheckedType = boolean | string | number;

export const columns: BasicColumn[] = [
  {
    title: '菜单名称',
    dataIndex: 'introduction',
    width: 200,
    align: 'left',
  },
  {
    title: '图标',
    dataIndex: 'icon',
    width: 50,
    customRender: ({ record }) => {
      return h(Icon, { icon: record.icon });
    },
  },
  {
    title: '组件',
    width: 200,
    dataIndex: 'component',
  },
  {
    title: '路由',
    width: 200,
    dataIndex: 'router',
    customRender: ({ record }) => {
      const text = record.router;
      return h(Tag, {}, () => text);
    },
  },
  {
    title: '排序',
    dataIndex: 'order_no',
    width: 100,
    customRender: ({ record }) => {
      const color = 'green';
      const text = record.order_no;
      return h(Tag, { color: color }, () => text);
    },
  },
  {
    title: '本菜单是否隐藏',
    dataIndex: 'hide_menu',
    width: 100,
    customRender: ({ record }) => {
      if (!Reflect.has(record, 'pendingStatus')) {
        record.pendingStatus = false;
      }
      return h(Switch, {
        checked: record.hide_menu == 0,
        checkedChildren: '隐藏',
        unCheckedChildren: '否',
        loading: record.pendingStatus,
        onChange(checked: CheckedType) {
          record.pendingStatus = true;
          const newStatus = checked ? '0' : '1';
          const { createMessage } = useMessage();
          SaveHideMenuStatus({
            id: record.id,
            field: 'hide_menu',
          })
            .then(() => {
              record.hide_menu = newStatus;
              createMessage.success(`已成功修改状态`);
            })
            .catch(() => {
              createMessage.error('修改状态失败');
            })
            .finally(() => {
              record.pendingStatus = false;
            });
        },
      });
    },
  },
  {
    title: '是否隐藏子菜单',
    dataIndex: 'hide_children_in_menu',
    width: 100,
    customRender: ({ record }) => {
      if (!Reflect.has(record, 'pendingStatus')) {
        record.pendingStatus = false;
      }
      return h(Switch, {
        checked: record.hide_children_in_menu == 0,
        checkedChildren: '隐藏',
        unCheckedChildren: '否',
        loading: record.pendingStatus,
        onChange(checked: CheckedType) {
          record.pendingStatus = true;
          const newStatus = checked ? 0 : 1;
          const { createMessage } = useMessage();
          SaveHideMenuStatus({
            id: record.id,
            field: 'hide_children_in_menu',
          })
            .then(() => {
              record.hide_children_in_menu = newStatus;
              createMessage.success(`已成功修改状态`);
            })
            .catch(() => {
              createMessage.error('修改状态失败');
            })
            .finally(() => {
              record.pendingStatus = false;
            });
        },
      });
    },
  },
  {
    title: '状态',
    dataIndex: 'status',
    width: 80,
    customRender: ({ record }) => {
      const status = record.status;
      const enable = ~~status === 0;
      const color = enable ? 'green' : 'red';
      const text = enable ? '启用' : '停用';
      return h(Tag, { color: color }, () => text);
    },
  },
  {
    title: '创建时间',
    dataIndex: 'created_at',
    width: 180,
  },
];

export const searchFormSchema: FormSchema[] = [
  {
    field: 'illustrate',
    label: '菜单名称',
    component: 'Input',
    colProps: { span: 8 },
  },
  // {
  //   field: 'status',
  //   label: '状态',
  //   component: 'Select',
  //   componentProps: {
  //     options: [
  //       { label: '启用', value: '0' },
  //       { label: '停用', value: '1' },
  //     ],
  //   },
  //   colProps: { span: 8 },
  // },
];

export const formSchema: FormSchema[] = [
  // {
  //   field: 'key',
  //   label: '菜单key',
  //   component: 'Input',
  //   required: true,
  //   helpMessage: ['首字母小写，多个单词使用 userList 大写字母连接'],
  // },
  {
    field: 'title',
    label: '菜单中文名称',
    component: 'Input',
    required: true,
  },
  {
    field: 'pid',
    label: '上级菜单',
    component: 'ApiTreeSelect',
    helpMessage: ['选择权限上级'],
    required: true,
    defaultValue: 0,
    componentProps: {
      // 展示的名字
      labelField: 'name',
      // 展示的值
      valueField: 'id',
      onChange: (e) => {
        console.log('selected:', e);
      },
      onOptionsChange: (options) => {
        console.log('get options', options.length, options);
      },
    },
  },
  // {
  //   field: 'title_en',
  //   label: '菜单英文名称',
  //   component: 'Input',
  //   required: true,
  // },
  {
    field: 'route_name',
    label: '路由名称',
    component: 'Input',
    required: true,
  },

  {
    field: 'router',
    label: '路由地址',
    component: 'Input',
    required: true,
  },
  {
    field: 'order_no',
    label: '排序',
    component: 'InputNumber',
    required: true,
  },
  {
    field: 'icon',
    label: '图标',
    component: 'IconPicker',
    helpMessage: [
      '选择菜单的图标',
      '可以在下面这个网站中拷贝',
      h('a', {href: 'https://icon-sets.iconify.design/', target: '_blank'}, 'Icon站'),
    ],
    // ifShow: ({ values }) => !isButton(values.type),
  },
  {
    field: 'component',
    label: '组件路径',
    component: 'Input',
    defaultValue: 'LAYOUT',
  },
  // {
  //   field: 'permission',
  //   label: '权限标识',
  //   component: 'Input',
  //   // ifShow: ({ values }) => !isDir(values.type),
  // },
  // {
  //   field: 'status',
  //   label: '状态',
  //   component: 'RadioButtonGroup',
  //   defaultValue: '0',
  //   componentProps: {
  //     options: [
  //       { label: '启用', value: '0' },
  //       { label: '禁用', value: '1' },
  //     ],
  //   },
  // },
  {
    field: 'is_ext',
    label: '是否外链',
    component: 'RadioButtonGroup',
    defaultValue: 0,
    componentProps: {
      options: [
        { label: '否', value: 0 },
        { label: '是', value: 1 },
      ],
    },
  },

  {
    field: 'keepalive',
    label: '是否缓存',
    component: 'RadioButtonGroup',
    defaultValue: 0,
    componentProps: {
      options: [
        { label: '否', value: 0 },
        { label: '是', value: 1 },
      ],
    },
  },

  {
    field: 'hide_menu',
    label: '是否隐藏本菜单',
    component: 'RadioButtonGroup',
    defaultValue: 0,
    componentProps: {
      options: [
        { label: '否', value: 0 },
        { label: '是', value: 1 },
      ],
    },
  },

  {
    field: 'hide_children_in_menu',
    label: '是否隐藏子菜单',
    component: 'RadioButtonGroup',
    defaultValue: 0,
    componentProps: {
      options: [
        { label: '否', value: 0 },
        { label: '是', value: 1 },
      ],
    },
  },
  {
    label: '备注',
    field: 'illustrate',
    component: 'InputTextArea',
  },
];
